<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>content</title>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css" />
    <script type="text/javascript" src="../../js/jquery-latest.min.js"></script>
    <script type="text/javascript" src="../../js/index2.js"></script>
    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
    
    <script type="text/javascript">

		/*构造查看明细按钮*/
   		function showDetail(val, row, index){
   	 		var html = '<a href="javascript:void(0);" onclick="showDialog(this);" id="' + index + '" >查看明细</a>';
			return html;
        }
        
        /*构造操作按钮*/
   		function showOperation(val, row, index){
			return '<a href="javascript:void(0);" class="need_replace_css1" onclick="showOper(this);" id="' + index + '" >维护</a>' +
				'&nbsp;|&nbsp;' + 
				'<a href="javascript:void(0);" class="need_replace_css2" onclick="showMessAlert(this.innerText);">完成</a>';
        }

		/*显示明细查看窗口*/
        function showDialog(obj){

        	$("#datagrid1").datagrid('selectRow',obj.id);
            var row = $("#datagrid1").datagrid('getSelected');

            if(row){
            	$('#detailShowForm').form('load',row);
            	$('#dlg_show').dialog('open');
            }
        }

		/*显示明细维护窗口*/
        function showOper(obj){
        	$("#datagrid1").datagrid('selectRow',obj.id);
            var row = $("#datagrid1").datagrid('getSelected');

            if(row){
            	$('#detailOperForm').form('load',row);
            	$('#dlg_oper').dialog('open');
            }
        }

		/*替换按钮*/
        function replaceBtnClass(){
			$(".need_replace_css1").linkbutton({plain:true, iconCls:'icon-edit'});
			$(".need_replace_css2").linkbutton({plain:true, iconCls:'icon-ok' });
        }

		/*提示确认信息*/
        function showMessAlert(str){
        	$.messager.confirm('确认','您确认要'+str+'所选记录？',function(r){    
        	    if (r){    
        	        alert('确认'+str);    
        	    }    
        	});  
        }

        $(function(){setTableCssByClass('table-striped');});//初始表格样式
    </script>
    
    <style type="text/css">
    	.input_no_border{
			border-left:0px;border-top:0px;border-right:0px;border-bottom:0px;
		}
    </style>
</head>
<body>
			 <form id="ff"> 
		    	<table cellpadding="0" cellspacing="0" class="table-striped">
		    		<tr>
		    			<td>项目编号：</td>
		    			<td><input name="jsontext1"/></td>
		    			<td>接收单位：</td>
		    			<td><select class="easyui-combobox" name="jsontext2" style="width: 150px;"><option></option><option>探井</option><option>开发井</option></td>
		    			<td>责任人：</td>
		    			<td><input name="jsontext3"/></td>
		    		</tr>
		    		<tr>
		    			<td>开始时间：</td>
		    			<td><input name="jsontext4" class="easyui-datebox"/></td>
		    			<td>结束时间：</td>
		    			<td><input name="jsontext5" class="easyui-datebox"/></td>
		    			<td>是否完成：</td>
		    			<td><select class="easyui-combobox" name="jsontext6" style="width: 150px;"><option></option><option>是</option><option>否</option></td>
		    		</tr>
		    	</table>
		    </form>
		    
			<div style="">
				<div style="height: 40px;padding: 0px 10px 0px 0px;text-align: right;">
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm();">查询</a>
					<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert(this.innerText);clearForm();">重置</a>
				</div>
		    	<table class="easyui-datagrid" title="数据列表" style="height:330px"
		    			id="datagrid1"
		    			url="../../data/dr/datagrid_data1.json"
						data-options="singleSelect:true,checkOnSelect:true,collapsible:true,method:'get',pagination:true,onLoadSuccess:replaceBtnClass">
					<thead>
						<tr>
							<th data-options="field:'ck',checkbox:true"></th>
							<th data-options="field:'jsontext1',width:60">项目编号</th>
							<th data-options="field:'jsontext2',width:100">接收单位</th>
							<th data-options="field:'jsontext3',width:100">负责人</th>
							<th data-options="field:'jsontext4',width:100">开始时间</th>
							<th data-options="field:'jsontext5',width:150">结束时间</th>
							<th data-options="field:'jsontext6',width:150">是否完成</th>
							<th data-options="field:'status',width:150,formatter:showDetail">明细信息</th>
							<th data-options="field:'status1',width:150,formatter:showOperation">操作</th>
						</tr>
					</thead>
				</table>
		    </div>
		    
	<!-- 明细查看弹出 -->		    
	<div id="dlg_show" class="easyui-dialog" closed="true" draggable="false" title="明细查看" style="width:1000px;height:500px;padding:10px">
		<form id="detailShowForm" method="post">
			<table class="table-striped">
				<tr>
					<td>项目编号：</td>
					<td><input name="jsontext1" readonly="readonly" class="input_no_border"/></td>
					<td>接收单位：</td>
					<td><input name="jsontext2" readonly="readonly" class="input_no_border"/></td>
				</tr>
				<tr>
					<td>负责人：</td>
					<td><input name="jsontext3" readonly="readonly" class="input_no_border"/></td>
					<td>开始时间：</td>
					<td><input name="jsontext4" readonly="readonly" class="input_no_border"/></td>
				</tr>
				<tr>
					<td>备注：</td>
					<td colspan="3"><textarea rows="5" cols="100" name="jsontext5"></textarea></td>
				</tr>
				<tr>
					<td colspan="4" align="right">
						<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="$('#dlg_show').dialog('close');">关闭</a>
					</td>
				</tr>
				
			</table>
		</form>
	</div>
	
	<!-- 明细维护弹出 -->		    
	<div id="dlg_oper" class="easyui-dialog" closed="true" draggable="false" title="明细维护" style="width:1000px;height:500px;padding:10px">
		<form id="detailOperForm" method="post">
			<table class="table-striped">
				<tr>
					<td>项目编号：</td>
					<td><input name="jsontext1"/></td>
					<td>接收单位：</td>
					<td><input name="jsontext2"/></td>
				</tr>
				<tr>
					<td>负责人：</td>
					<td><input name="jsontext3"/></td>
					<td>开始时间：</td>
					<td><input name="jsontext4"/></td>
				</tr>
				<tr>
					<td colspan="4" align="right">
						<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-ok" onclick="$('#dlg_oper').dialog('close');">保存</a>
						<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg_oper').dialog('close');">取消</a>
					</td>
				</tr>
			</table>
		</form>
	</div>
		    
</body>
</html>